<template>
    <div>
      <div class="header header-goods-detail-1" :style="aOpacity">
        <div class="header-left">
          <span @click="leftClick"><i class="icon-cheveron-left icon-a"></i></span>
        </div>
        <div class="header-center"></div>
        <div class="header-right">
          <span @click="rightClick"><i class="icon-a icon-cart"></i></span>
        </div>
      </div>
      <div class="header header-goods-detail-2" :style="bOpacity">
        <div class="header-left">
          <i class="icon-cheveron-left icon-a" @click="leftClick"></i>
        </div>
        <div class="header-center">
          <ul class="tab" @click="changePage">
            <li :class="{'active':page === 0}" data-page="0">商品</li>
            <li :class="{'active':page === 1}" data-page="1">详情</li>
            <li :class="{'active':page === 2}" data-page="2">评价</li>
          </ul>
        </div>
        <div class="header-right">
          <i class="icon-a icon-cart" @click="rightClick"></i>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    props: {
      opacity:{
      	type:Number,
        default: 0
      },
			page:{
				type:Number,
				default: 0
			}
    },
    data() {
      return {
      }
    },
    methods: {
    	changePage(e) {
    		let page = parseInt(e.target.attributes['data-page'].value);
    		this.$emit('changePage',page);
      },
			leftClick() {
        this.$router.go(-1);
      },
			rightClick(){
				this.$router.push({ path: '/shoppingCat' });
      }
    },
    computed:{
			aOpacity(){
				return `opacity:${1 - this.opacity}`
      },
      bOpacity(){
				return `opacity:${this.opacity}`
      }
    }

  }
</script>

<style scoped lang="less">
  @import '../../common/less/variable';
  .header-goods-detail-1{

    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    height: 42px;
    line-height: 42px;
    z-index: 52;
    transition: all 0.1s linear;
    .header-left{
      width: 50px;
      padding-top: 6px;
      padding-left: 5px;
      .icon-a{
        width: 30px;
        height: 30px;
        display: inline-block;
        font-size: 30px;
        color: #fff;
        background: rgba(0,0,0,0.4);
        border-radius: 50%;
      }
    }
    .header-center{
      flex: 1;
      text-align: center;
      .tab{
        height: 42px;
        max-width: 180px;
        margin: 0 auto;
        display: flex;
        li{
          flex: 1;
          color: #fff;
          &.active{
            border-bottom: 3px solid #fff;
          }
        }
      }
    }
    .header-right{
      width:40px;
      padding-top: 6px;
      .icon-a{
        width: 30px;
        height: 30px;
        display: inline-block;
        font-size: 30px;
        color: #fff;
        background: rgba(0,0,0,0.4);
        border-radius: 50%;
        &:before{
          margin-left: 1px;
          font-size: 18px;
          line-height: 30px;
          padding-left: 4px;
          vertical-align: top;
        }
      }
    }
  }
  .header-goods-detail-2{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    height: 42px;
    line-height: 42px;
    z-index: 52;
    background-color: @color-theme;
    transition: all 0.1s linear;
    .header-left{
      width: 50px;
      padding-top: 6px;
      padding-left: 5px;
      .icon-a{
        width: 30px;
        height: 30px;
        display: inline-block;
        font-size: 30px;
        color: #fff;
        border-radius: 50%;
      }
    }
    .header-center{
      flex: 1;
      text-align: center;
      .tab{
        height: 42px;
        max-width: 180px;
        margin: 0 auto;
        display: flex;
        li{
          flex: 1;
          color: #fff;
          &.active{
            border-bottom: 3px solid #fff;
          }
        }
      }
    }
    .header-right{
      width:40px;
      padding-top: 6px;
      .icon-a{
        width: 30px;
        height: 30px;
        display: inline-block;
        font-size: 30px;
        color: #fff;
        border-radius: 50%;
        &:before{
          margin-left: 1px;
          font-size: 18px;
          line-height: 30px;
          padding-left: 4px;
          vertical-align: top;
        }
      }
    }
  }
</style>
